<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <link rel="stylesheet" type="text/css" href="style1.css">
  </head>
  <body>
    <header>我是头部position: fixed;z-index: 9;</header>
    <section class="flexModal">
      <nav>
        <ul>
          <li>section.flexModal nav ul>li*5</li>
          <li>栏目一</li>
          <li>栏目二</li>
          <li class="active">栏目三</li>
          <li>栏目四</li>
          <li>栏目五</li>
        </ul>
      </nav>
      <article>
        <h3>
          内容区域 section.flexModal articel
        </h3>
        <p>
          section{
            padding: 60px 0;
          }
        </p>
        <p> 
          section.flexModal{
            display: flex;
          }
        </p>
        <p> 
          section.flexModal nav{
            width: 200px;
          }
        </p>
        <p> 
          section.flexModal article{
            flex: 1;
          }
        </p>
      </article>
    </section>
    <footer>底部版权同头部 position: fixed;z-index: 9;</footer>
  </body>
</html>